<template>
  <div ref="pane" class="data-panel">
    <div class="header">近6个月数据走势</div>
    <template>
      <el-carousel
        ref="card"
        type="card"
        :autoplay="false"
        indicator-position="none"
        :height="height + 'px'"
        @change="handleChange"
      >
        <el-carousel-item v-for="(list, index) in slideList" :key="index">
          <span
            :class="['tag', 'tag-' + list.id, { active: index === lastIndex }]"
            >{{ list.btnText }}</span
          >
          <div
            :id="list.id"
            :class="['chart-container', { layer: index !== curIndex }]"
          ></div>
        </el-carousel-item>
      </el-carousel>
    </template>
  </div>
</template>

<script>
import * as echarts from 'echarts'
import { chartStyle } from '../config/chartStyle'
import _ from 'lodash'
export default {
  name: 'TrendPane',
  inheritAttrs: false,
  props: {
    data: {
      type: Object,
      required: true,
    },
  },
  data() {
    return {
      height: 0,
      chartList: [],
      lastIndex: 1,
      curIndex: 0,
      slideList: [
        {
          id: 'port',
          btnText: '端口数',
        },
        {
          id: 'charge',
          btnText: '充电量',
        },
        {
          id: 'user',
          btnText: '用户数',
        },
      ],
    }
  },
  watch: {
    data(val) {
      val.portStatistic &&
        this._handleChartData(
          val.portStatistic,
          'port',
          '#473CC0',
          'rgba(71, 60, 192, 0)'
        )
      val.userStatistic &&
        this._handleChartData(
          val.userStatistic,
          'user',
          '#087BFF',
          'rgba(8, 123, 255, 0)'
        )
      val.electricStatistic &&
        this._handleChartData(
          val.electricStatistic,
          'charge',
          '#649C00',
          'rgba(100, 156, 0, 0)'
        )
    },
  },
  mounted() {},
  activated() {
    this.height = this.$refs.pane.getBoundingClientRect().height - 75
    window.addEventListener('resize', this._handleRezize)
  },
  deactivated() {
    window.removeEventListener('resize', this._handleRezize)
  },
  deystroyed() {
    window.removeEventListener('resize', this._handleRezize)
  },
  methods: {
    _handleRezize() {
      this.height = this.$refs.pane.getBoundingClientRect().height - 75
      this.$nextTick(() => {
        this.chartList.forEach((item) => item && item.resize())
      })
    },
    handleChange(cur) {
      let tranlateArr = this.$refs.card.$children.map((item) => item.translate)
      let max = Math.max(...tranlateArr)
      this.lastIndex = tranlateArr.findIndex((item) => {
        return item === max
      })
      this.curIndex = cur
      this.$nextTick(() => {
        this.chartList.forEach((item) => item && item.resize())
      })
    },
    _handleChartData(data, id, color0, color1) {
      let chartDom = document.getElementById(id)
      if (!chartDom) return
      let myChart = echarts.init(chartDom)
      let option
      let XAxis = []
      let YAxis = []
      data.forEach((item) => {
        XAxis.push(item.day)
        YAxis.push(item.amount)
      })
      option = {
        backgroundColor: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
          { offset: 0, color: '#383C4F' },
          { offset: 1, color: '#2E2E3C' },
        ]),
        animation: true,
        tooltip: chartStyle.tooltip,
        grid: chartStyle.grid,
        xAxis: _.assign({ data: XAxis }, chartStyle.xAxisObj),
        // xAxis: chartStyle.xAxisObj,
        yAxis: chartStyle.yAxisObj,
        series: [
          _.assign(
            {
              data: YAxis,
            },
            chartStyle.seriesLineObj(color0, color1)
          ),
        ],
      }
      option && myChart.setOption(option)
      this.chartList.push(myChart)
    },
    refresh(data) {
      this.chartList.forEach((item) => {
        let chartData = data.portStatistic
        let XAxis = []
        let YAxis = []
        chartData.forEach((item) => {
          XAxis.push(item.day)
          YAxis.push(item.amount)
        })
        let option = item.getOption()
        option.series[0].data = YAxis
        option.xAxis.data = XAxis
        item.clear()
        item.setOption(option)
      })
    },
  },
}
</script>

<style scoped lang="scss">
.data-panel {
  position: relative;
  height: calc(50% - 36px);
  background: linear-gradient(180deg, #282a37 0%, #2a2c3a 100%);
  box-shadow: 0px 0px 50px 0px rgba(16, 19, 39, 0.5);
  padding: 24px 16px 0px;
  .header {
    color: #ececec;
    font-size: 16px;
    margin-bottom: 8px;
    &::before {
      content: '';
      height: 14px;
      width: 3px;
      display: inline-block;
      background: #4c71f9;
      margin-right: 15px;
    }
  }
}
.el-carousel__item.is-active {
  width: 70%;
  left: -10%;
  background: linear-gradient(180deg, #383c4f 0%, #2e2e3c 100%);
  box-shadow: 0px 0px 50px 0px rgba(16, 19, 39, 0.5);
}
// .el-carousel__item:nth-child(2n) {
//   background: linear-gradient(180deg, #282a37 0%, #2a2c3a 100%);
// }

// .el-carousel__item:nth-child(2n + 1) {
//   background: linear-gradient(180deg, #282a37 0%, #2a2c3a 100%);
// }
.tag {
  position: absolute;
  top: 19px;
  left: 16px;
  z-index: 2;
  width: 52px;
  height: 24px;
  color: #ffffff;
  font-size: 12px;
  padding: 0;
  text-align: center;
  line-height: 24px;
}
.tag-port {
  background: #473cc0;
  border: 1px solid #473cc0;
}
.tag-user {
  background: #087bff;
  border: 1px solid #087bff;
}
.tag-charge {
  background: #649c00;
  border: 1px solids #649c00;
}
.active {
  right: 16px;
  left: auto;
}
.card {
  position: relative;
  font-size: 24px;
  color: white;
  width: 100%;
  height: 100%;
}
.chart-container {
  height: 100%;
  width: 100%;
  // background: linear-gradient(180deg, #282a37 0%, #2a2c3a 100%);
  // box-shadow: 0px 0px 50px 0px rgba(16, 19, 39, 0.5);
  opacity: 1;
}
.layer {
  opacity: 0.7;
}
</style>
